<template>
    <el-card class="card-with-gradient">
        <el-form :inline="true">
            <el-form-item>
                <el-button size="large" type="success" @click="selectAllCourse()">添加</el-button>
            </el-form-item>
            <el-form-item style="float: right;">
                <el-input v-model="tname" placeholder="请输入要搜素的关键字" clearable @input="selectByPage(1)" />
            </el-form-item>
        </el-form>
        <el-table :data="pageInfo.list" style="width: 100%">
            <el-table-column prop="tid" label="ID" width="60px" />
            <el-table-column prop="tno" label="工号" width="80px" />
            <el-table-column prop="tavatar" label="头像">
                <template #default="scope">
                    <el-avatar :size="55" :src="'http://localhost:8080/upload/' + scope.row.tavatar" />
                </template>
            </el-table-column>
            <el-table-column prop="tname" label="姓名" width="80px" />
            <el-table-column prop="tage" label="年龄" />
            <el-table-column prop="tgender" label="性别" />
            <el-table-column prop="tpoint" label="好感度">
                <template #default="scope">
                    <el-progress :text-inside="true" :stroke-width="16" :percentage="scope.row.tpoint" />
                </template>
            </el-table-column>
            <el-table-column prop="tstate" label="在职状态">
                <template #default="scope">
                    <el-tag type="success" v-if="scope.row.tstate == 1">在职</el-tag>
                    <el-tag type="info" v-else>离职</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="course.cname" label="教授课程" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" :icon="Edit" color="blue" @click="selectByTid(scope.row.tid)" />
                    <el-popconfirm title="你确认要删除嘛" confirm-button-text="确认" cancel-button-text="取消" width="200px"
                        @confirm="deleteTeacher(scope.row.tid)">
                        <template #reference>
                            <el-button type="primary" :icon="Delete" color="red" @click="console.log(scope.row.tid)"
                                v-if="scope.row.estate == 2" disabled />
                            <el-button type="primary" :icon="Delete" color="red" @click="console.log(scope.row.tid)"
                                v-else />
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-row class="row-bg" justify="center">
            <el-pagination background layout="prev, pager, next" 
                            v-model:current-page="pageInfo.pageNum"
                            :page-count="pageInfo.pages" 
                            @update:current-page="selectByPage"
                            style="margin-top: 50px;" />
        </el-row>
    </el-card>


    <!-- 添加部门的对话框开始 -->
    <el-dialog v-model="addDialogShow" title="新增老师" width="500">
        <el-form :model="form" label-width="20%">
            <el-form-item label="工号">
                <el-input autocomplete="off" v-model="teacherAdd.tno" style="width: 300px" />
            </el-form-item>
            <!-- action：请求的URL地址 
             name: 上传的文件字段名-->
            <el-form-item label="头像">
                <el-upload class="avatar-uploader" action="http://localhost:8080/admin/upload/" name="pic"
                    :show-file-list="false" :on-success="handleAvatarSuccessAdd" :before-upload="beforeAvatarUpload"
                    :headers="headerObj">
                    <img v-if="imageUrlAdd" :src="imageUrlAdd" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input autocomplete="off" v-model="teacherAdd.tname" style="width: 300px" />
            </el-form-item>
            <el-form-item label="年龄">
                <el-input autocomplete="off" v-model="teacherAdd.tage" style="width: 300px" />
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="teacherAdd.tgender" style="width: 300px">
                    <el-radio value="男" size="large">男</el-radio>
                    <el-radio value="女" size="large">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="好感度">
                <el-slider v-model="teacherAdd.tpoint" show-input class="slider-demo-block" />
            </el-form-item>
            <el-form-item label="教授课程">
                <!-- el-select中v-model的值最终选择的元素的的值
                    label-显示/看
                    value - option的值，选择了哪个option，那么v-model的值就和被选中的这个option的value值相同-->
                <el-select v-model="teacherAdd.cid" placeholder="请选择所教课程" style="width: 300px">
                    <el-option v-for="(course, index) in allCourse" :key="index" :label="course.cname"
                        :value="course.cid" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addDialogShow = false">取消</el-button>
                <el-button @click="insert()">确定</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 添加部门的对话框结束 -->

    <!-- 修改部门的对话框开始 -->
    <el-dialog v-model="updateDialogShow" title="修改老师" width="500">
        <el-form :model="form" label-width="20%">
            <el-form-item label="工号">
                <el-input autocomplete="off" disabled v-model="teacherUpdate.tno" style="width: 300px" />
            </el-form-item>
            <el-form-item label="头像">
                <el-upload class="avatar-uploader" action="http://localhost:8080/admin/upload/" name="pic"
                    :show-file-list="false" :on-success="handleAvatarSuccessUpdate" :before-upload="beforeAvatarUpload"
                    :headers="headerObj">
                    <img v-if="imageUrlUpdate" :src="imageUrlUpdate" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>

            <el-form-item label="姓名">
                <el-input autocomplete="off" v-model="teacherUpdate.tname" style="width: 300px" />
            </el-form-item>
            <el-form-item label="年龄">
                <el-input autocomplete="off" v-model="teacherUpdate.tage" style="width: 300px" />
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="teacherUpdate.tgender" style="width: 300px">
                    <el-radio value="男" size="large">男</el-radio>
                    <el-radio value="女" size="large">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="好感度">
                <el-slider v-model="teacherUpdate.tpoint" show-input class="slider-demo-block" />
            </el-form-item>
            <el-form-item label="教授课程">
                <el-select v-model="teacherUpdate.cid" placeholder="请选择所属部门" style="width: 300px">
                    <el-option v-for="(course, index) in allCourse" :key="index" :label="course.cname"
                        :value="course.cid" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="updateDialogShow = false">取消</el-button>
                <el-button @click="update()">确定</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 修改部门的对话框结束 -->
</template>

<script setup>
import teacherApi from '@/api/teacherApi';
import { ref, computed } from 'vue';
import { ElLoading } from 'element-plus';
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'//删除按钮特效
import courseApi from '@/api/courseApi';
import { useTokenStore } from '@/stores/token.js';//使用store
const tokenStore = useTokenStore();
//头像上传设置token(现在用pinia代替用了)
// const headerObj = ref({
//     token: sessionStorage.getItem("token")
// })
const headerObj = computed(() => {
    let token = tokenStore.tokenStr
    return {
        token
    }
})


const tname = ref('')//用于右上角的查询
const pageInfo = ref({//保存信息，用于遍历
    pages: 0,
    size: 0,
    pageNum:0,
})
const addDialogShow = ref(false)//操作新增的弹框出现
const updateDialogShow = ref(false);//操作修改的弹框出现
const allCourse = ref([])//所有的部门
//被添加老师的信息
const teacherAdd = ref({
    tno: "",
    tavatar: "",
    tname: "",
    tage: "",
    tgender: "男",
    tpoint: "",
    tstate: "1",
    cid: ""
});
//上传头像的地址
const imageUrlAdd = ref("")
//修改头像的地址
const imageUrlUpdate = ref("")
//上传头像之前的回调
function beforeAvatarUpload(rawFile) {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('图片仅支持JPG格式!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('图片大小不能超过2MB!')
        return false
    }
    return true
}
//成功添加上传头像之后的回调
function handleAvatarSuccessAdd(resp, uploadFile) {
    console.log(resp);
    if (resp.code == 10000) {
        ElMessage.success(resp.msg)
        imageUrlAdd.value = "http://localhost:8080/upload/" + resp.data;//头像地址
        teacherAdd.value.tavatar = resp.data
    }
}
//成功修改上传头像之后的回调
function handleAvatarSuccessUpdate(resp, uploadFile) {
    console.log(resp);
    if (resp.code == 10000) {
        ElMessage.success(resp.msg)
        imageUrlUpdate.value = "http://localhost:8080/upload/" + resp.data;//头像地址
        teacherUpdate.value.tavatar = resp.data
    }
}


//定义方法查询所有部门 并显示增加员工对话框
function selectAllCourse() {
    courseApi.selectAll()
        .then(resp => {
            console.log(resp.data)
            allCourse.value = resp.data
            addDialogShow.value = true
        })
}
//查询所有部门
function selectCourse() {
    courseApi.selectAll()
        .then(resp => {
            //console.log(resp.data)
            allCourse.value = resp.data
        })
}
//确认添加数据
function insert() {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    teacherApi.insert(teacherAdd.value)
        .then(resp => {
            loading.close()
            //判断---弹出消息--刷新表格
            if (resp.code == 10000) {
                //弹出消息
                ElMessageElMessage.success(resp.msg)
                //隐藏
                addDialogShow.value = false
                //清空
                teacherAdd.value = {
                    tno: "",
                    tavatar: "",
                    tname: "",
                    tage: "",
                    tgender: "男",
                    tpoint: "",
                    tstate: "",
                    cid: ""
                }

            } else {
                //弹出消息
                ElMessage.error(resp.msg)
            }
            //刷新表格
            //refreshCurrentPage()
            selectByPage(1)
        })
}
//修改过程--双重绑定的交点
const teacherUpdate = ref({
    tid: "",
    tno: "",
    tavatar: "",
    tname: "",
    tage: "",
    tgender: "",
    tstate: "",
    tpoint: "",
    cid: ""
});

//定义方法查询员工信息，回显数据
function selectByTid(tid) {
    teacherApi.selectByTid(tid)
        .then(resp => {
            console.log(resp);
            selectCourse()

            teacherUpdate.value = resp.data
            imageUrlUpdate.value = `http://localhost:8080/upload/${teacherUpdate.value.tavatar}`//把图片的地址挂载到修改弹出的页面上
            //展示修改模态框
            updateDialogShow.value = true;
        })
}
//确认修改数据
function update() {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    teacherApi.update(teacherUpdate.value)
        .then(resp => {
            loading.close()
            //判断---弹出消息--刷新表格
            if (resp.code == 10000) {
                //弹出消息
                ElMessage.success(resp.msg)
                //隐藏
                updateDialogShow.value = false
            } else {
                //弹出消息
                ElMessage.error(resp.msg)
            }
            //刷新表格
            //refreshCurrentPage()
            selectByPage(1)
        })
}

//刷新页面--原方法已更新，永原来的
// function refreshCurrentPage() {
//     const urlParams = new URLSearchParams(window.location.search);
//     const currentPage = parseInt(urlParams.get('page')) || 1;
//     location.reload();
// }

//删除的特效
function deleteTeacher(tid) {
    teacherApi.delete(tid)
        .then(resp => {
            const loading = ElLoading.service({
                lock: true,
                text: 'Loading',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            //判断---弹出消息--刷新表格
            if (resp.code == 10000) {
                loading.close()
                //弹出消息
                ElMessage.success(resp.msg)
                refreshCurrentPage()
            } else {
                loading.close()
                //弹出消息
                ElMessage.error(resp.msg)
            }
        })

}

//定义方法接受数据
function selectByPage(PageNum) {
    teacherApi.selectByPage(PageNum, tname.value)
        .then(resp => {
            //console.log(PageNum);
            console.log(resp.data);
            pageInfo.value = resp.data
        })
}

selectByPage(1)



</script>

<style scoped>
.avatar-uploader,
.avatar {
    width: 200px;
    height: 160;
    display: block;
    border: 2px dotted #dcdfe6;
    border-radius: 5px;
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 200px;
    height: 160px;
    text-align: center;
}

.card-with-gradient {
    background: linear-gradient(to right, rgb(233, 181, 85), rgb(244, 83, 156));
    /* 添加一些基本的样式来美化卡片 */
    border-radius: 8px;
    /* 圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* 阴影 */
    color: white;
}

.slider-demo-block {
    max-width: 600px;
    display: flex;
    align-items: center;
}

.slider-demo-block .el-slider {
    margin-top: 0;
    margin-left: 12px;
}
</style>